<template>
  <div>
    <a-modal
      title="货柜准备"
      width="1280px"
      :visible="visible"
      :destroy-on-close="true"
      :mask-closable="false"
      @cancel="handleCancel"
    >
    <!-- 第一行的提示内容 -->
      <a-row style="padding-bottom:21px;">
        <a-col>
          <div class="custom-warn">
            <span style="padding-right:9px;">
              <div class="warning-img"></div>
            </span>
            <span slot="description" class="warn-text-style">
              提示：您可在下方列表零件号列输入您想要查找的零件号进行查找添加，同时也可以使用复制粘贴的方式进行<strong>批量添加</strong>，建议使用<strong>复制粘贴</strong>的方式进行添加以方便您进行操作。
            </span>
          </div>
        </a-col>
      </a-row>
   
      <!-- 第二行的搜索框 -->
      <a-row type="flex" justify="end" style="padding-bottom:21px;" :gutter="4">
        <a-col style="width:25.9%; margin-right:6px;" :order="1">
          <!-- <div class="outer-box">
            <div class="left-box">
              <div class="icon-box"></div>
              <input type="text" v-model="keywords" placeholder="搜索物料零件号/物料名称">
            </div>
            <div class="right-box" @click="searchCommit">
              <span>搜索</span>
            </div>
          </div> -->
          <div class="ipt-new">
            <input type="text" 
            v-model="keywords"
            placeholder="搜索商品零件号/商品名称" 
            @keyup.enter="searchCommit"
            @blur="searchBlur"
            @input="searchChange">
            <div class="ipt-icon"></div>
          </div>
        </a-col>
        <a-col style="width:96px;" :order="2">
          <div class="export-btn" @click="showExModal">
            <span></span>
            <span>批量导入</span>
          </div>
            <!-- <a-upload
              name="file"
              class="export-btn"
              :showUploadList="false"
              :action="uploadUrl"
              accept=".xls,.xlsx"
              @change="handleChange"
            >
              <a-button> <span></span> <span>批量导入</span> </a-button>
            </a-upload> -->
        </a-col>
      </a-row>

      <!-- 表格的主体内容部分 -->
      <div class="scroll-area">
        <table class="tb tb-b c-100 tb-first">
          <thead>
            <tr>
              <th class="width-38 custom-cur-th">序号</th>
              <th class="width-193">零件号</th>
              <th class="width-96">商品名称</th>
              <th class="width-193">规格</th>
              <th class="width-96">计量单位</th>
              <th class="width-96" :style="highlightTh">库存数量</th>
              <th class="width-96" :style="highlightTh">可售库存预警数量</th>
              <th class="width-96" :style="highlightTh">含税成本价(元)</th>
              <th class="width-96 text-center">操作</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item,index) in tableData" >
              <tr :key="item.key+'row1'" v-if="item.visibleFlag">
                <td class="width-38 text-center">{{index+1}}</td>
                  <template v-if="item.edit">
                    <td colspan="2">
                      <div class="left-box" :style="item.dupNo||item.formError?redStyle:''">
                        <div class="icon-box"></div>
                        <input type="text" 
                        :ref="'inputRef'+item.key"
                        placeholder="搜索零件号/商品名称"
                        v-model="item.manufacturerPartNum" 
                        @keyup.enter="$event.target.blur"
                        @change="partNumIptChanged(item)"
                        @blur="partNumIptBlured(item)" />
                      </div>
                    </td>
                  </template>
                  <template v-else-if="!item.edit">
                    <td class="width-193">
                      <div class="two-cols">
                        <span>{{item.manufacturerPartNum}}</span>
                        <span @click="setEditable(item, 'inputRef'+item.key)"></span>
                      </div>
                    </td>
                    <td class="width-96">{{item.materialName}}</td>
                  </template>
                  <td class="width-193">
                    <div class="custom-column">
                      <a-popover placement="topLeft" :overlayStyle="widthAdjust">
                        <template slot="content">
                          <div class="goods-msg">
                            <p>规格</p>
                            <p>{{item.specifications}}</p>
                          </div>
                        </template>
                        <span>{{item.specifications}}</span>
                      </a-popover>
                    </div>
                  </td>
                  <td class="width-96">{{item.unit}}</td>
                  <td class="width-96">
                       <div class='custom-inputnumber' 
                       :style="item.invenError?redStyle:''">
                        <input type="text" 
                        placeholder="请输入"
                        v-model.trim="item.inventoryNum" 
                        @blur="inputBlur($event, item.key, 'inventoryNum')" 
                        @paste="pasteHandler($event, item.key, 'inventoryNum')" 
                        @input="changeInputVal($event.target, item.key, 'inventoryNum')"/>
                        <div class="custom-stepper">
                          <span @click="addCount($event, item.key, 'inventoryNum')">+</span>
                          <span @click="minusCount($event, item.key, 'inventoryNum')">-</span>
                        </div>
                      </div>
                  </td>
                  <td class="width-96">
                       <div class='custom-inputnumber' 
                       :style="item.warningError?redStyle:''">
                        <input type="text" 
                        v-model.trim="item.warningInventoryNum" 
                        placeholder="请输入"
                        @blur="inputBlur($event, item.key, 'warningInventoryNum')" 
                        @paste="pasteHandler($event, item.key, 'warningInventoryNum')" 
                        @input="changeInputVal($event.target, item.key, 'warningInventoryNum')"/>
                        <div class="custom-stepper">
                          <span @click="addCount($event, item.key, 'warningInventoryNum')">+</span>
                          <span @click="minusCount($event, item.key, 'warningInventoryNum')">-</span>
                        </div>
                      </div>                  
                      </td>
                  <td class="width-96">
                       <div class='custom-inputnumber' :style="item.priceError?redStyle:''">
                        <input type="text" 
                        v-model.trim="item.taxPrice" 
                        placeholder="请输入"
                        @blur="priceInputBlur($event, item.key, 'taxPrice')" 
                        @paste="pastePriceHandler($event, item.key, 'taxPrice')" 
                        @input="changePriceInputVal($event.target, item.key, 'taxPrice')"/>
                        <div class="custom-stepper">
                          <span @click="addPriceCount($event, item.key, 'taxPrice')">+</span>
                          <span @click="minusPriceCount($event, item.key, 'taxPrice')">-</span>
                        </div>
                      </div>                  
                      </td>
                  <td class="width-96 text-center">
                    <a-tooltip placement="top" 
                    :overlayStyle="tooltipStyle"  
                    @click="delCertainItem(item.key)">
                      <template slot="title">
                        <span>删除</span>
                      </template>
                      <span class="delete-style"></span>
                    </a-tooltip>
                  </td>
              </tr>
              <!-- 错误提示的部分 -->
              <transition name="slide" :key="item.key+'row2'" v-if="item.visibleFlag">
                  <tr class="second-row" 
                  v-if="item.priceError || item.setNo1 || item.setNo2 || item.dupNo || item.formError || item.invenError || item.warningError">
                    <td class="width-38"></td>
                    <td class="width-193">
                      <div v-if="item.dupNo||item.formError||item.setNo1 || item.setNo2">
                        <div class="tips-icon"></div>
                        <span class="error-text">
                          {{item.dupNo?'零件号重复':item.formError?'请填写正确的零件号格式':item.setNo1?'该零件已上架':item.setNo2?'该零件已在货柜':''}}
                        </span>
                      </div>
                    </td>
                    <td class="width-96"></td>
                    <td class="width-193"></td>
                    <td class="width-96"></td>
                    <td class="width-96">
                      <div v-if="item.invenError">
                        <div class="tips-icon"></div><span class="error-text">上架必须填写库存数量</span>
                      </div>
                    </td>
                    <td class="width-96">
                      <div v-if="item.warningError">
                        <div class="tips-icon"></div><span class="error-text">上架必须填写可售库存预警数量</span>
                      </div>
                    </td>
                    <td class="width-96">
                      <div v-if="item.priceError">
                        <div class="tips-icon"></div><span class="error-text">上架必须填写含税销售价</span>
                      </div>
                    </td>
                    <td class="width-96"></td>
                  </tr>
                </transition>
              </template>
          </tbody>
        </table>
      </div>

      <!-- 表格下面的搜索框部分 -->
      <table  class="tb tb-b c-100" style="margin-bottom:25px;">
        <tbody class="search-fn inpt-bot">
          <tr>
            <td class="width-38 text-center">
              {{tableData.length?tableData.length+1:1}}
            </td>
            <td style="width:28.9%">
              <div class="search-bot">
                <div class="icon-box"></div>
                <input type="text"
                ref="botIpt"
                v-model="keyword" 
                placeholder="搜索零件号/商品名称" 
                @input="iptChanged($event.target, 'keyword')" 
                @blur="iptBlured"
                @keyup.ctrl.86="iptBlured"
                @keyup.enter="iptBlured"
                >
                <div class="icon-close" v-show="closeFlag" @mousedown="clearKeyword"></div>
                <!-- 下拉框效果 暂时保留功能 -->
                <!-- <div class="children" :class="showList?'show-child':''">
                  <div class="child-item">
                    <span>100020</span>
                    <span>添加</span>
                  </div>
                  <div class="child-item">
                    <span>100020</span>
                    <span>添加</span>
                  </div>
                  <div class="child-item">
                    <span>100020</span>
                    <span>添加</span>
                  </div>
                </div> -->
              </div>
            </td>
            <td class="width-193"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96"></td>
            <td class="width-96 text-center">
              <a-tooltip placement="top" :overlayStyle="tooltipStyle" @click="delAllItems">
                <template slot="title">
                  <span>删除</span>
                </template>
                <span class="delete-style custom-bg"></span>
              </a-tooltip>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 弹框的footer部分 -->
      <template slot="footer">
        <div class="txt-custom item-wrap">
          <span>商品数量：</span>
          <span>{{tableData.length}}</span>
          <span>件</span>
        </div>
        <div class="item-wrap item-mid item-nonhover">
          <div class="item-nonhover1">
            <div
              style="background: rgba(24,118,255,0.08);color: #1876FF;border: 1px solid #1876ff;border-radius: 2px;" 
              @click="handleOk('container')">
                移入货柜中
            </div>
          </div>
          <div class="item-nonhover2" style="margin-left:16px">
            <div
              :loading="confirmLoading" 
              style="background: #d73737;color: #fff;border: 1px solid #d73737;border-radius: 2px;"
              @click="handleOk('selling')">
                一键上架
          </div>
          </div>
        </div>
        <div class="item-wrap"></div>
      </template>
    </a-modal>

    <!-- 上传组件的弹框 -->
    <a-modal
      title="批量导入"
      width="688px"
      class="inner-modal"
      :visible="innerModalVisible"
      :destroy-on-close="true"
      :mask-closable="false"
      @cancel="handleInnerCancel"
      :bodyStyle="{padding: 0}"
    >
     <div class="middle-content">
      <a-upload-dragger
        accept=".xlsx"
        class="inner-export-btn"
        :showUploadList="false"
        :action="uploadUrl"
        :before-upload="beforeUpload"
      >
        <div class="ant-upload-drag-icon">
          <span class="span-icon"></span>
          <div class="outer-right">
            <div class="inner-top">
              <span class="inner-left">
                点击或将文件拖拽至此处
              </span>
              <span  @click.stop="downloadTem" class="inner-right">
                下载模板.xlsx
              </span>
            </div>
            <div class="inner-bot"><span>上传文件仅支持Excel (xlsx)文件.</span></div>
          </div>
        </div>
        <!-- <div class="ant-upload-text">
          点击或将文件拖拽到这里上传
        </div>
        <p class="ant-upload-hint">
          支持扩展名：xlsx
        </p>
        <p class="ant-upload-download" @click.stop="downloadTem">
          下载模板
        </p> -->
        <!-- <p>
          <span class="clip-myicon" v-if="fileList.name"></span>
          <span v-if="fileList.name" class="file-name-style">{{fileList.name}}</span>  -->
          <!-- 占位符 防止抖动 -->
          <!-- <span class="test-text">i</span>
          <span class="close-myicon" v-if="fileList.name" @click.stop="delCurFile"></span>
        </p>    -->
        </a-upload-dragger>
        <div class="show-list" v-if="fileList.name">
          <div class="file-left">
            <span class="clip-myicon"></span>
            <span v-if="fileList.name" class="file-name-style">{{fileList.name}}</span> 
          </div>
          <div class="file-right">
            <span class="close-myicon" v-if="fileList.name" @click.stop="delCurFile"></span>
          </div>
        </div>
     </div>
      <template slot="footer">
        <div class="item-wrap item-bot">
          <div class="bot-btn1">
            <div
              style="background: #fff;color: #272424;border: 1px solid rgba(39,36,36,0.06);;border-radius: 2px;width:72px" 
              @click="cancelUpload">
                取消
            </div>
          </div>
          <div class="bot-btn2" style="margin-left:12px">
            <div :loading="upLoading" 
            type="primary" 
            @click="handleUploadOk()" 
            style="width:72px;background: #d73737;border-radius: 2px;color:#fff;border: 1px solid #d73737">确定</div>
          </div>
        </div>
      </template>
   </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import service from '../../../../utils/request'
import {Alert, Popover} from 'ant-design-vue';
Vue.use(Alert)
Vue.use(Popover)

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    visible: {
      handler: function (newVal) {
        if(newVal){
          this.initKey = this.tableData.length>0?(this.tableData[this.tableData.length-1].key)+1:1
          // 如果是通过excel上传的数据 则通过this.codeStr获取零件号 并且添加到this.tableData中
          if(this.codeStr.length>0){
            this.getEachRow(this.codeStr, 'code')
          }
        }else {
          // this.tableData = []
          this.keywords = ''
          this.keyword = ''
          this.codeStr = []
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      uploadUrl:process.env.VUE_APP_BASE_API,
      innerModalVisible:false,
      confirmLoading: false,
      showList:false,
      innerLoading:false,
      keyword:'',
      keywords:'',
      initKey:0,
      redStyle: {border:"1px solid #D73737"},
      widthAdjust:{maxWidth: '300px'},
      tooltipStyle:{opacity: '0.8', color: '#fff'},
      tableData:[],
      temporaryTable:[],
      fileList:{},
      upLoading:false,
      codeStr:[],
      highlightTh:{backgroundColor: '#fff3e2', color: '#ff9003'},
      closeFlag:false
    };
  },
  methods: { 
    // 点击确认触发行为
    handleOk(type) {
      if(this.tableData.length>0){
        // 每次检查前删除上次的重复零件号的标记
        this.tableData.forEach(item=>{
          delete item.dupNo
          delete item.setNo1
          delete item.setNo2
          delete item.priceError
          delete item.invenError
          delete item.warningError
          this.$set(item, 'visibleFlag', true)
        })
        this.confirmLoading = true;
        // 检查零件号和含税价的填写是否有错误
        const arr = this.markError(this.tableData, type)
        let flag = arr.some(item=>item.priceError||item.formError||item.dupNo||item.invenError||item.warningError)

        // 如果零件号都正确 含税价格都正确则调取接口
        if(!flag){
          // 格式化传递给后台的数据
          // container移入货柜必须填写价格 数量不写默认0
          let formatArr = this.tableData.map(item=>{
            return {
              brandId:item.brandId,
              brandName:item.brandName,
              categoryId:item.categoryId,
              categoryName:item.categoryName,
              inventoryNum: item.inventoryNum||0,
              materialCode: item.materialCode,
              materialId: item.materialId,
              materialImgId:item.materialImgId,
              materialName: item.materialName,
              materialPartNum:item.manufacturerPartNum,
              quality:item.quality,
              specifications: item.specifications,
              status:type==='selling'?1:0,
              taxPrice: item.taxPrice,
              tenantId:this.$store.state.user.currentTenant.id,
              unit: item.unit,
              warningInventoryNum: item.warningInventoryNum||0
            }
          })

          // 一键上架 调取接口
          if(type==='selling'){
            this.$store.dispatch('request', this.$api.sellerCenter.saveToSelling(formatArr)).then(res=>{
              console.log(res);
              // 如果后台返回的res.result为null 则说明成功
              if(!res.result){
                this.$message.success('上架成功');
                this.$emit('update:visible', false)
                this.confirmLoading = false;
                this.tableData = []
                this.$emit('closedModal')
              }
            }).catch((res)=>{
              // 如果后台返回的res.result为数组 说明有错误
              this.$message.error('上架失败');
              this.confirmLoading = false;
              if(res.result.length>0){
                for(let i =0;i<res.result.length;i++){
                  for(let j =0;j<this.tableData.length;j++){
                    if(res.result[i].materialId == this.tableData[j].materialId){
                      this.$set(this.tableData[j], 'setNo1', true)
                    }
                  }
                }
                this.confirmLoading = false;
              }
            })
          // 移到货柜中 调取接口
          }else if(type==='container'){
            this.$store.dispatch('request', this.$api.sellerCenter.saveToContainer(formatArr)).then(res=>{
              // console.log(res);
              // 如果后台返回的res.result为null 则说明成功
              if(!res.result){
                this.$message.success('移入货柜成功');
                this.$emit('update:visible', false)
                this.confirmLoading = false;
                this.tableData = []
                this.$emit('closeModal')
              }
            }).catch((res)=>{
              // 如果后台返回的res.result为数组 说明有错误
              this.$message.error('移入货柜失败');
              this.confirmLoading = false;
              if(res.result.length>0){
                for(let i =0;i<res.result.length;i++){
                  for(let j =0;j<this.tableData.length;j++){
                    if(res.result[i].materialId == this.tableData[j].materialId){
                      this.$set(this.tableData[j], 'setNo2', true)
                    }
                  }
                }
                this.confirmLoading = false;
              }
            })   
          }
        // 如果零件号不正确或含税价未填写 则错误提示
        }else {
            this.confirmLoading = false;
            this.tableData = arr
        }
      }
    },
    // 点击按钮后 对含税价和零件号进行校验 不符合要求的进行标识
    markError(arr, type){
      for(let i = 0;i<arr.length;i++){
        // selling一键上架必须填写价格 数量必须填写
        // container移入货柜必须填写价格 数量不写默认0
        // 如果价格标0 或者价格未填写 则错误提示
        if(parseFloat(arr[i].taxPrice)===0 || isNaN(parseFloat(arr[i].taxPrice))){
          arr[i].priceError = true
        }
    
        // 如果零件号为空 则错误提示
        if(!arr[i].manufacturerPartNum.trim()){
          arr[i].formError = true
        }
        // 如果一键上架 则要求库存 预警库存必须输入
        if(type==='selling'){
          if(parseInt(arr[i].inventoryNum)===0 || isNaN(parseInt(arr[i].inventoryNum))){
            arr[i].invenError = true
          }
          if (parseInt(arr[i].warningInventoryNum)===0 || isNaN(parseInt(arr[i].warningInventoryNum))){
            arr[i].warningError = true
          }
        }
        // 如果零件号重复 则错误提示
        for(let j = i+1;j<arr.length;j++){
          if(arr[j].dupNo!==true&&arr[i].formError!==true){
            if(arr[i].manufacturerPartNum===arr[j].manufacturerPartNum){
              arr[j].dupNo = true
            }else {
              arr[j].dupNo = false
            }
          }
        }
      }
      return arr
    },
    // 弹框关闭触发回调
    handleCancel() {
      this.clearIpt()
      this.$emit('update:visible', false)
    },
    // ctrl和enter组合键触发事件
    keyDown(){
      this.iptBlured()
    },
    // 清空所有的数据
    clearIpt(){
      this.keywords = ''
      this.keyword = ''
      // this.tableData = []
    },
    // input框的值变化时 进行修改 只允许输入整数
    changeInputVal(target, key, prop){
        for(let i =0;i<this.tableData.length;i++){
          if(this.tableData[i].key === key){
            // 去除前后空格
            this.tableData[i][prop] = target.value.replace(/^\s*/g ,'').replace(/\s* $/g ,'').replace(/[^0-9 ]/g,'')
            target.value = target.value.replace(/^\s*/g ,'').replace(/\s* $/g ,'').replace(/[^0-9 ]/g,'')

            // 如果用户是粘贴的内容 则修改当前input的值
            let arr = target.value.trim().split(/[\s]/)
            if(arr.length>0){
              target.value = arr[0]
              this.$set(this.tableData[i], prop, arr[0])
            }
          }
        }
    },
    // 用户在input粘贴内容后 多行数据进行修改
    pasteHandler(ev, key, prop){
      // 找到当前粘贴的input对应的数据索引
      let index = 0
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          index = i
        }
      }

      // 获取到用户粘贴板的内容
      let arr = ev.clipboardData.getData('Text').trim().split(/[\s]/)
      let newArr = arr.filter(item=>item!=='')
      let myLength = index+1+newArr.length>this.tableData.length?this.tableData.length:index+1+newArr.length
      if(newArr.length>0){
        for(let k=0;k<newArr.length;k++){
          if(k!==0){
            // 如果用户粘贴的长度大于总数组的长度 则不再赋值
            if(index+k+1 <= myLength){
              this.tableData[index+k][prop] = newArr[k]
            }
          }
        }
      }
    },
    // 数量input框失去焦点时 格式化数字
    inputBlur(ev, key, prop){
      // if(!ev.target.value){
      //   for(let i =0;i<this.tableData.length;i++){
      //     if(this.tableData[i].key === key){
      //       ev.target.value = 0
      //       this.$set(this.tableData[i], prop, 0)
      //     }
      //   }
      // }
      // let txt = prop==='inventoryNum'?'invenError':'warningError'

      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          if(!ev.target.value){
            ev.target.value = ''
            this.$set(this.tableData[i], prop, '')
            // this.$set(this.tableData[i], txt, true)
          }else {
            // this.$set(this.tableData[i], txt, false)
          }
        }
      }
    },
    // 价格input框的值变化时 进行修改 保留小数点后两位
    changePriceInputVal(target, key, prop){
        for(let i =0;i<this.tableData.length;i++){
          if(this.tableData[i].key === key){
            // 去除前后空格
            this.tableData[i][prop] = target.value.match(/\d+(\.\d{0,2})?/) ? target.value.match(/\d+(\.\d{0,2})?/)[0] : ''
            target.value = target.value.match(/\d+(\.\d{0,2})?/) ? target.value.match(/\d+(\.\d{0,2})?/)[0] : ''

            // 如果用户是粘贴的内容 则修改当前input的值
            let arr = target.value.trim().split(/[\s]/)
            let flag = target.value.indexOf(' ') === -1? true:false
            if(!flag){
              target.value = parseFloat(arr[0]).toFixed(2)
              this.$set(this.tableData[i], prop, parseFloat(arr[0]).toFixed(2))
            }
          }
        }
    },
    // 用户在价格input粘贴内容后 多行数据进行修改
    pastePriceHandler(ev, key, prop){
      // 找到当前粘贴的input对应的数据索引
      let index = 0
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          index = i
        }
      }

      // 获取到用户粘贴板的内容
      let arr = ev.clipboardData.getData('Text').trim().split(/[\s]/)
      let newArr = arr.filter(item=>item!=='')
      let myLength = index+1+newArr.length>this.tableData.length?this.tableData.length:index+1+newArr.length
      if(newArr.length>0){
        for(let k=0;k<newArr.length;k++){
            // 如果用户粘贴的长度大于总数组的长度 则超出项不再赋值
            if(index+k+1 <= myLength){
              this.tableData[index+k][prop] = parseFloat(newArr[k]).toFixed(2)
            }
        }
      }
    },
    // 价格input框失去焦点时 格式化价格
    priceInputBlur(ev, key, prop){
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          if(!ev.target.value){
            ev.target.value = ''
            this.$set(this.tableData[i], prop, '')
            // this.$set(this.tableData[i], 'priceError', true)
          }else {
            ev.target.value = parseFloat(this.tableData[i][prop]).toFixed(2)
            this.$set(this.tableData[i], prop, parseFloat(this.tableData[i][prop]).toFixed(2))
            // this.$set(this.tableData[i], 'priceError', false)
          }
        }
      }
    },
    // 步进器加法事件
    addCount(ev, key, prop){
      let num
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value==''){
        num = 1
      }else {
      num = parseInt(ev.currentTarget.parentElement.parentElement.firstElementChild.value) + 1
      }
      ev.currentTarget.parentElement.parentElement.firstElementChild.value = num
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          this.$set(this.tableData[i], prop, num)
        }
      }
    },
    // 步进器减法事件
    minusCount(ev, key, prop){
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value==0||ev.currentTarget.parentElement.parentElement.firstElementChild.value=='') return
      let num = parseInt(ev.currentTarget.parentElement.parentElement.firstElementChild.value) - 1
      ev.currentTarget.parentElement.parentElement.firstElementChild.value = num
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          this.$set(this.tableData[i], prop, num)
        }
      }
    },
    // 价格步进器加法事件
    addPriceCount(ev, key, prop){
      let price
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value==''){
        price = 0.01
      }else {
        price =  ((parseFloat(ev.currentTarget.parentElement.parentElement.firstElementChild.value)*100+1)/100).toFixed(2)
      }
      ev.currentTarget.parentElement.parentElement.firstElementChild.value=price
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          this.$set(this.tableData[i], prop, price)
        }
      }
    },
    // 价格步进器减法事件
    minusPriceCount(ev, key, prop){
      if(ev.currentTarget.parentElement.parentElement.firstElementChild.value==0||ev.currentTarget.parentElement.parentElement.firstElementChild.value=='') return
      let price = ((parseFloat(ev.currentTarget.parentElement.parentElement.firstElementChild.value)*100-1)/100).toFixed(2)
      ev.currentTarget.parentElement.parentElement.firstElementChild.value=price
      for(let i =0;i<this.tableData.length;i++){
        if(this.tableData[i].key === key){
          this.$set(this.tableData[i], prop, price)
        }
      }
    },
    // 搜索零件号输入框的值变化时触发
    iptChanged(target, prop){
      // 只允许input框内输入字母数字和空格 暂时不需要
      // this[prop] = target.value.replace(/^\s*/g ,'').replace(/[^a-zA-Z0-9 ]/g,'')
      // target.value = target.value.replace(/^\s*/g ,'').replace(/[^a-zA-Z0-9 ]/g,'')
      // 不允许开头输入空格
      this[prop] = target.value.replace(/^\s*/g ,'')
      target.value = target.value.replace(/^\s*/g ,'')

      if(target.value){
        this.closeFlag = true
      }

      // 暂时不需要进行下拉框显示效果 功能保留
      // if(this.keyword.trim()){
      //   this.showList = true
      // }else {
      //   this.showList = false
      // }
    },
    // 搜索零件号输入框失去焦点时触发
    iptBlured(){
      if(this.keyword){
        let arr = this.keyword.trim().split(/[\s]/)
        let filterArr = arr.filter(item=>item!=='')
        this.getEachRow(filterArr, 'row')

        this.keyword = ''
      }
      this.closeFlag = false
    },
    // 点击清空input框的内容 mousedown事件先触发 然后触发input的blur事件
    clearKeyword(){
      this.keyword = ''

      // 清空后input框需要重新获取焦点 定时器后于blur事件触发
      setTimeout(() => {
        this.$refs.botIpt.focus()
      }, 300)
    },
    getEachRow(filterArr, type){
      let promiseList = []
      // 供应商id
      let tenantId = this.$store.state.user.currentTenant.id

      for(let i =0;i<filterArr.length;i++){
        let _type = undefined
        if(type==='code'){
          _type = filterArr[i].manufacturerPartNum
        }else if (type==='row'){
          _type = filterArr[i]
        }
      // 定义手动参数
      let sendParams = {
        url: this.uploadUrl + `/center/materiel/getMaterielByPartNumAndBrand/${_type}/${tenantId}`,
        processData: false,
        method: 'GET',
        headers: {'Content-Type': 'application/json'}
      };
      sendParams.headers[this.$store.state.user.tokenName] = this.$store.state.user.tokenValue;

      // 存储promise请求
      promiseList.push(new Promise((resolve)=>{
          service(sendParams).then(res=>{
              resolve(res)
          })
        }))
      }

      // 使用promise.all准备将来进行一次性更新
      Promise.all(promiseList).then((result) => {
        // console.log(result)
        let allData = []
        for(let j=0;j<result.length;j++){
          // 如果code字段存在 则说明后台响应成功
          if(result[j]&&result[j].code){
            // 如果没有查询到零件号 则添加改行 并重置各个字段
            if(result[j].message==="没有找到对应物料信息"){
              console.log(result[j]);
              console.log(filterArr[j]);
              allData.push({
                materialId:'', 
                materialName:'',
                materialCode: '',
                categoryId:'',
                categoryName:'',
                specifications:'',
                unit:'',
                manufacturerPartNum: type==='code'?filterArr[j].manufacturerPartNum:type==='row'?filterArr[j]:'',
                brandId:'',
                brandName:'',
                quality:'',
                materialImgId:'',
                labelName:'',
                inventoryNum: type==='code'?filterArr[j].inventoryNum:'',
                warningInventoryNum: type==='code'?filterArr[j].warningInventoryNum:'',
                taxPrice: type==='code'?filterArr[j].taxPrice:'', 
                key: this.initKey++, 
                visibleFlag:true,
                formError:true,
                edit:false
              })
              // 如果查询到 则正常添加
            }else if (result[j].success){
              allData.push({
                materialId:result[j].result.materialId, 
                materialName:result[j].result.materialName,
                materialCode: result[j].result.materialCode,
                categoryId:result[j].result.categoryId,
                categoryName:result[j].result.categoryName,
                specifications:result[j].result.specifications,
                unit:result[j].result.unit,
                manufacturerPartNum: result[j].result.manufacturerPartNum,
                brandId:result[j].result.brandId,
                brandName:result[j].result.brandName,
                quality:result[j].result.quality,
                materialImgId:result[j].result.materialImgId,
                labelName:result[j].result.labelName,
                inventoryNum: type==='code'?filterArr[j].inventoryNum:'',
                warningInventoryNum: type==='code'?filterArr[j].warningInventoryNum:'',
                taxPrice: type==='code'?filterArr[j].taxPrice:'', 
                key: this.initKey++, 
                visibleFlag:true,
                edit:false})
            }
          }
        }

        const temTableArr = JSON.parse(JSON.stringify(this.tableData))
        const newTableArr = temTableArr.concat(...allData)
        this.tableData = newTableArr
        if(type==='code'){
          this.upLoading = false
        }
      })
    },
    // 零件号输入框的值变化后 重新搜索该零件号对应的数据
    partNumIptChanged(item){
      // 供应商id必传字段
      let tenantId = this.$store.state.user.currentTenant.id
      console.log(tenantId);
      this.$store.dispatch('request', this.$api.sellerCenter.getMaterialDetails(item.manufacturerPartNum, tenantId)).then((res)=>{
      // this.$store.dispatch('request', this.$api.sellerCenter.getMaterialDetails(item.manufacturerPartNum,'23e09b3f1b02a30acee9a16217adca80')).then((res)=>{
        console.log(res);
        if(res.success&&res.result){
          for(let i = 0;i<this.tableData.length;i++){
            if(this.tableData[i].key === item.key){
              this.$set(this.tableData[i], 'materialId', res.result.materialId)
              this.$set(this.tableData[i], 'materialName', res.result.materialName)
              this.$set(this.tableData[i], 'materialCode', res.result.materialCode)
              this.$set(this.tableData[i], 'categoryId', res.result.categoryId)
              this.$set(this.tableData[i], 'categoryName', res.result.categoryName)
              this.$set(this.tableData[i], 'specifications', res.result.specifications)
              this.$set(this.tableData[i], 'unit', res.result.unit)
              this.$set(this.tableData[i], 'manufacturerPartNum', res.result.manufacturerPartNum)
              this.$set(this.tableData[i], 'brandId', res.result.brandId)
              this.$set(this.tableData[i], 'brandName', res.result.brandName)
              this.$set(this.tableData[i], 'quality', res.result.quality)
              this.$set(this.tableData[i], 'materialImgId', res.result.materialImgId)
              this.$set(this.tableData[i], 'labelName', res.result.labelName)
              this.$set(this.tableData[i], 'inventoryNum', '')
              this.$set(this.tableData[i], 'warningInventoryNum', '')
              this.$set(this.tableData[i], 'taxPrice', '')
              this.$set(this.tableData[i], 'formError', false)
              this.$set(this.tableData[i], 'edit', false)
              this.$set(this.tableData[i], 'setNo1', false)
              this.$set(this.tableData[i], 'setNo2', false)
            }
          }
        }else {
          for(let i = 0;i<this.tableData.length;i++){
            if(this.tableData[i].key === item.key){
              this.$set(this.tableData[i], 'materialId', '')
              this.$set(this.tableData[i], 'materialName', '')
              this.$set(this.tableData[i], 'materialCode', '')
              this.$set(this.tableData[i], 'categoryId', '')
              this.$set(this.tableData[i], 'categoryName', '')
              this.$set(this.tableData[i], 'specifications', '')
              this.$set(this.tableData[i], 'unit', '')
              this.$set(this.tableData[i], 'manufacturerPartNum', item.manufacturerPartNum)
              this.$set(this.tableData[i], 'brandId', '')
              this.$set(this.tableData[i], 'brandName', '')
              this.$set(this.tableData[i], 'quality', '')
              this.$set(this.tableData[i], 'materialImgId', '')
              this.$set(this.tableData[i], 'labelName', '')
              this.$set(this.tableData[i], 'inventoryNum', '')
              this.$set(this.tableData[i], 'warningInventoryNum', '')
              this.$set(this.tableData[i], 'taxPrice', '')
              this.$set(this.tableData[i], 'formError', true)
              this.$set(this.tableData[i], 'edit', false)
              this.$set(this.tableData[i], 'setNo1', false)
              this.$set(this.tableData[i], 'setNo2', false)
            }
          }
        }
      }).catch(()=>{
          for(let i = 0;i<this.tableData.length;i++){
            if(this.tableData[i].key === item.key){
              this.$set(this.tableData[i], 'materialId', '')
              this.$set(this.tableData[i], 'materialName', '')
              this.$set(this.tableData[i], 'materialCode', '')
              this.$set(this.tableData[i], 'categoryId', '')
              this.$set(this.tableData[i], 'categoryName', '')
              this.$set(this.tableData[i], 'specifications', '')
              this.$set(this.tableData[i], 'unit', '')
              this.$set(this.tableData[i], 'manufacturerPartNum', item.manufacturerPartNum)
              this.$set(this.tableData[i], 'brandId', '')
              this.$set(this.tableData[i], 'brandName', '')
              this.$set(this.tableData[i], 'quality', '')
              this.$set(this.tableData[i], 'materialImgId', '')
              this.$set(this.tableData[i], 'labelName', '')
              this.$set(this.tableData[i], 'inventoryNum', '')
              this.$set(this.tableData[i], 'warningInventoryNum', '')
              this.$set(this.tableData[i], 'taxPrice', '')
              this.$set(this.tableData[i], 'formError', true)
              this.$set(this.tableData[i], 'edit', false)
            }
          }
      })
    },
    partNumIptBlured(item){
      for(let i = 0;i<this.tableData.length;i++){
        if(this.tableData[i].key === item.key){
          this.$set(this.tableData[i], 'edit', false)

          // 检查当前的零件号是否重复 求交集
          const nums = [this.tableData[i]].map(item => item.manufacturerPartNum);
          const intersection = this.tableData.filter(item => nums.includes(item.manufacturerPartNum))

          if(intersection.length>1){
            this.$set(this.tableData[i], 'dupNo', true)
          }else {
            this.$set(this.tableData[i], 'dupNo', false)
          }
        }
      }
    },
    // 删除表格的某一行
    delCertainItem(key){
      this.tableData = this.tableData.filter(item=>item.key!==key)
    },
    // 删除表格的所有内容
    delAllItems(){
      this.tableData = []
    },
    // 本地搜索效果 搜索零件号 物料名称
    searchCommit(){
      // console.log(this.keywords);
      // 如果用户没有输入关键字 则所有数据都显示
      if(!this.keywords){
        this.tableData.forEach(item=>{
          this.$set(item, 'visibleFlag', true)
        })
      }else {
        // 如果用户输入关键字 那么匹配到的数据显示 没匹配到的隐藏
        this.tableData.forEach(item=>{
          if(item.manufacturerPartNum.toLowerCase() === this.keywords.toLowerCase() || item.materialName === this.keywords){
            this.$set(item, 'visibleFlag', true)
          }else {
            this.$set(item, 'visibleFlag', false)
          }
        })
      }
    },
    // 搜索框的值发生变化时触发
    searchChange(){
      if(!this.keywords){
        this.searchCommit()
      }
    },
    // 搜索框的值失去焦点时触发
    searchBlur(){
      if(this.keywords){
        this.searchCommit()
      }
    },
    // 展示上传的modal
    showExModal(){
      // 如果上传modal显示之前 tableData有数据 则保存一份tableData
      if(this.tableData.length>0){
        this.temporaryTable = this.tableData
      }else {
        this.temporaryTable = []
      }
      this.$emit('update:visible', false)
      this.innerModalVisible = true
    },
    // 弹框关闭触发回调 上传modal关闭前把tableData的值取回来
    handleInnerCancel() {
      if(this.temporaryTable.length>0){
        this.tableData = this.temporaryTable
      }
      this.$emit('update:visible', true)
      this.innerModalVisible = false
      this.fileList = {}
    },
    downloadTem(){
      this.$message.error('功能暂未开放 请联系管理人员')
    },
    // 手动上传 需要return false
    beforeUpload(file){
      this.fileList = file;
      // console.log(file);
      return false;
    },
    // 文件选择之后 手动上传操作 调取上传接口
    handleUploadOk(){
      if(this.fileList.name){
        const formData = new FormData();
        formData.append('file', this.fileList);
        this.upLoading = true;
        
        // 定义手动上传参数
        let sendParams = {
          url: this.uploadUrl + '/mall/inventory/importToContainer',
          processData: false,
          method: 'POST',
          data: formData,
          headers: {'Content-Type': 'multipart/form-data'}
        };
        sendParams.headers[this.$store.state.user.tokenName] = this.$store.state.user.tokenValue;
        
        // 手动上传
        service(sendParams).then(res=>{
          console.log(res)
          if(res.success && res.result){
            // 筛选过滤 后台返回有数据的才添加
             let formatArr = res.result.map(item=>{
              return {
                materialCode:item.materialCode,
                manufacturerPartNum:item.manufacturerPartNum,
                inventoryNum:item.inventoryNum,
                warningInventoryNum:item.warningInventoryNum,
                taxPrice:parseFloat(item.taxPrice).toFixed(2)
              }
            })
            formatArr = formatArr.filter(item=>item.manufacturerPartNum)
            this.codeStr = formatArr
            this.$emit('update:visible', true)
            this.innerModalVisible = false
            this.fileList = {}
          }
        }).catch((res)=>{
          console.log(res, 'error')
          this.$message.error('上传失败')
          this.$emit('update:visible', true)
          this.innerModalVisible = false
          this.fileList = {}
        })
      }else {
        this.handleInnerCancel()
      }
    },
    delCurFile(){
      this.fileList = {}
    },
    setEditable(row, refStr){
      this.tableData.forEach((item,index)=>{
        if(item.key===row.key){
          this.$set(this.tableData[index], 'edit', true)
        }
      })
      this.$nextTick(function () {
        for(let key in this.$refs){
          if(key===refStr){
            this.$refs[key][0].focus()
            console.log(this.$refs[key]);
          }
        }
      },50)
    },
    // 点击取消上传
    cancelUpload(){
      this.$emit('update:visible', true)
      this.innerModalVisible = false
      this.fileList = {}
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .ant-modal {
  top: 21%;
}
/deep/ .ant-modal-title {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #272424;
}
/deep/ .ant-modal-header {
  padding: 16px 24px;
}
/deep/ .ant-modal-close-x {
  width: 16px;
  height: 16px;
  margin-right: 24px;
}
/deep/ .ant-modal-footer {
  display: flex;
  padding: 16px 24px;
}
.middle-content {
  padding: 24px;
  padding-bottom: 20px;
}
/deep/ .ant-upload {
  background: #fafafa;
  padding: 33px 153px;
}
.outer-right {
  display: inline-block;
  vertical-align: middle;
  margin-left: 24px;
  .inner-top {
      font-family: PingFangSC, PingFangSC-Regular;
    .inner-left {
      font-size: 14px;
      color: @newColorGreyFontM;
      line-height: 20px;
    }
    .inner-right {
      padding-left: 12px;
      font-size: 12px;
      color: @newBlue;
      line-height: 17px;
    }
  }
  .inner-bot {
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    color: #ff9003;
    line-height: 22px;
    text-align: left;
  }
}
.show-list {
  margin-top: 18px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.10); 
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  .file-left {
    .file-icon {
      width: 13px;
      height: 13px;
      margin-left: 9px;
      margin-right: 10px;
      background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
      background-size: 13px 13px;
    }
  }
}
.file-name-style {
  vertical-align: middle;
  font-size: 12px;
  line-height: 1;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}

.custom-inputnumber{
  display: inline-block;
  width: 100%;
  height: 32px;
  display: flex;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  box-sizing: border-box;
  input {
    flex: 1;
    width: calc(100% - 21px);
    border: none;
    outline: none;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .custom-stepper{
    width: 21px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(39,36,36,0.06);
    span {
      display: block;
      height: 15px;
      text-align: center;
      line-height: 15px;
      color: #525050;
      cursor: pointer;
      -webkit-user-select: none;
      &:hover{
        color: #D73737;
      }
      &:last-child {
        border-top: 1px solid rgba(39,36,36,0.06);
        line-height: 14px;
      }
    }
  }
}
.outer-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  display: flex;
  .right-box {
    width: 48px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    border-left: 1px solid rgba(39,36,36,0.06);
    cursor: pointer;
    user-select: none;
  }
  .left-box{
    flex: 1;
  }
}
.left-box {
  display: flex;
  align-items: center;
  .icon-box {
    width: 13px;
    height: 13px;
    margin-left: 9px;
    margin-right: 10px;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
  input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
  }
}
.inpt-bot .left-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
}
.test-text {
  color: transparent;
}
.search-fn .left-box {
  position: relative;
  .children {
    position: absolute;
    display: none;
    z-index: 10;
    top: 36px;
    left: 0;
    right: 0;
    padding: 14px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0px 0px 2px 2px;
    box-shadow: 0px 0px 6px 0px rgba(39,36,36,0.08); 
    .child-item{
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: #272424;
      margin-bottom: 12px;
      cursor: pointer;
      &:last-child{
      margin-bottom: 0;
      }
      &:hover {
        color: #D73737;
      }
    }
  }
}
.export-btn {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  span:first-child{
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url('../../../../assets/image/sellerHub/exporticon.png') center no-repeat;
    background-size: 13px 13px;
    vertical-align: middle;
  }
  span:last-child{
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    line-height: 32px;
    padding-left: 6px;
  }
}
/deep/ .export-btn{
  border-radius: 3px;
}
.ant-upload-drag-icon {
  // margin-bottom: 14px!important;
  .span-icon{
    vertical-align: middle;
    display: inline-block;
    width: 66px;
    height: 66px;
    background: url('../../../../assets/image/sellerHub/uploadicon.png') center no-repeat;
    background-size: 66px 66px;
  }
}
.clip-myicon {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  background: url('../../../../assets/image/sellerHub/clipicon.png') center no-repeat;
  background-size: 14px 14px;
  margin-right: 6px;
}
.close-myicon {
  cursor: pointer;
  display: inline-block;
  width: 11px;
  height: 11px;
  background: url('../../../../assets/image/sellerHub/closeicon.png') center no-repeat;
  background-size: 11px 11px;
  margin-left: 14px;
  margin-top: 2px;
}
.export-btn /deep/ .ant-btn:hover, .ant-btn:focus{
  border-color: rgba(39, 36, 36, 0.06) !important;
}
.export-btn /deep/ .ant-btn {
  padding: 0 11px;
  border: 1px solid rgba(39,36,36,0.06);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  font-size: 14px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  font-size: 14px;
} 
.custom-warn{
  padding: 12px 24px;
  background: rgba(255,144,3,0.06);
  border: 1px solid rgba(255,144,3,0.20);
  border-radius: 3px;
}
.warning-img {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: url('../../../../assets/image/sellerHub/tipsicon.png') center no-repeat;
    background-size: 14px 14px;
}
.custom-warn strong {
  color: #ff9003;
  font-weight: normal;
}
.warn-text-style {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #272424;
}
.txt-custom {
  line-height: 32px;
  text-align: left;
  box-sizing: border-box;
  font-family: PingFangSC, PingFangSC-Regular;
}
.txt-custom {
  span:first-child {
    font-size: 12px;
    color: @newColorGreyFontM;
  }
  span:nth-child(2) {
    color: @activeRed;
    font-size: 22px;
    font-weight: 700;
  }
  span:last-child {
    padding-left: 4px;
    opacity: 0.6;
    font-size: 12px;
    color: @newColorGreyFontM;
  }
}
.item-wrap {
  flex: 1;
}
.item-mid {
  display: flex;
  justify-content: center;
}

table{
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed;
}
.c-100 {
	width: 100%;
}
.tb th { 
  padding: 11px 9px; 
  // padding-right: 0;
  border-bottom:1px solid rgba(39,36,36,0.06); 
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  color: #272424;
  vertical-align: middle;
  background-color: #f9f9f9;
}
.tb td { 
  padding: 4px 9px; 
  background-color:#fff; 
  border-bottom:1px solid rgba(39,36,36,0.06); 
  word-wrap: break-word; 
  word-break:break-all; 
  vertical-align: middle;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: #272424;
}
.tb tr:hover>td {
		background-color: rgba(215,55,55, .08)!important;
}
.search-fn tr:hover>td {
		background-color: #fff !important;
}
.tb-b {border-top:1px solid rgba(39,36,36,0.06);}
.tb-b th , .tb-b td {border-color: rgba(39,36,36,0.06);}
.width-38 {
  width: 3.8%;
}
.width-96 {
  width: 9.6%;
}
.width-193 {
  width: 19.3%;
}
table .left-box {
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 3px;
  width: 100%;
}
table .left-box input {
  height: 100%;
  overflow: hidden;
}
table .custom-column{
  position: relative;
  white-space:nowrap; 
  text-overflow: ellipsis; 
  overflow: hidden;
}
table .delete-style{
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../../assets/image/sellerHub/deleteicon.png') center no-repeat;
  background-size: 16px 16px;
}
.scroll-area {
  // max-height: 240px;
  // overflow-y: auto;
  table {
    border-top: none;
    border-bottom: none;
    tbody tr:last-child td {
      border-bottom: none;
    }
  }
}
.tb-first tbody {
  display: block;
  max-height: 242px;
  overflow-y: scroll;
}
 
.tb-first thead,
.tb-first tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
// .search-fn .left-box .show-child {
//   display: block;
// }
.search-fn .custom-bg{
  background: url('../../../../assets/image/sellerHub/deletegrey.png') center no-repeat;
  background-size: 16px 16px;
  &:hover {
    background: url('../../../../assets/image/sellerHub/deleteicon.png') center no-repeat;
    background-size: 16px 16px;
  }
}
table .second-row td {
  padding-top: 8px;
  padding-bottom: 8px;
}
.tips-icon{
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../../assets/image/sellerHub/errorinfo.png') center no-repeat;
  background-size: 15px 15px;
}
.error-text {
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #272424;
  margin-left: 4px;
}
table .second-row td {
  padding-right: 0px;
}
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

// .slide-enter-active,
// .slide-leave-active {
//   // transition: opacity .2s linear;
// }

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
.item-nonhover1 /deep/ .ant-btn {
  font-size: 12px;
  padding-left: 11px;
  padding-right: 11px;
}
.item-nonhover2 /deep/ .ant-btn {
  font-size: 12px;
  padding-left: 11px;
  padding-right: 11px;
}
.item-nonhover1 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #1876FF !important;
  background-color: rgba(24,118,255,0.08) !important;
  border-color: #1876ff !important;
}
.item-nonhover2 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #fff !important;
  background-color: #d73737 !important;
  border-color: #d73737 !important;
}
tbody::-webkit-scrollbar{
  width:0;
}
.goods-msg {
  font-size: 12px;
  color: #272424;
  p:nth-of-type(1) {
    font-weight: 600;
    border-left: 2px solid @activeRed;
    padding-left: 4px;
    height: 10px;
    line-height: 10px;
    margin-bottom: 6px;
  }
  p:last-child {
    margin-bottom: 0;
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #272424;
    line-height: 17px;
  }
  p>span {
    width: 60px;
    opacity: 0.6;
    display: inline-block;
  }
}
.text-center {
  text-align: center;
}
.two-cols {
  width: 100%;
  span:last-child {
    cursor: pointer;
    margin-left: 6px;
    margin-top: -3px;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    background: url('../../../../assets/image/sellerHub/editicon.png') center no-repeat;
    background-size: 14px 14px;
  }
}
.ipt-new {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(39,36,36,0.06);
  border-radius: 2px;
  position: relative;
  input {
    width: 100%;
    height: 32px;
    border: 0px;
    outline: none;
    padding-left: 12px;
    padding-right: 28px;
  }
  .ipt-icon {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 10px;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity: 0.2;
  font-size: 12px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: @newColorGreyFontM;
}
input {
  font-size: 12px;
}
.search-bot {
  position: relative;
  width: 100%;
  height: 100%;
  .icon-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    margin-left: 9px;
    margin-right: 10px;
    background: url('../../../../assets/image/sellerHub/searchicon.png') center no-repeat;
    background-size: 13px 13px;
  }
  input {
    height: 32px;
    width: 100%;
    border: 0px;
    outline: none;
    background: #ffffff;
    border: 1px solid rgba(39,36,36,0.06);
    border-radius: 2px;
    padding-left: 32px;
  }
  input::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    outline: 1px solid red;
  }
  .icon-close {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    margin-left: 9px;
    margin-right: 10px;
    background: url('../../../../assets/image/sellerHub/clearicon.png') center no-repeat;
    background-size: 13px 13px;
  }
}
.item-bot {
  display: flex;
  justify-content: flex-end;
  /deep/ .ant-btn {
    padding: 0 5px;
  }
}
.bot-btn1 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #272424 !important;
  background-color: #fff !important;
  border-color: rgba(39,36,36,0.06) !important;
}
.bot-btn2 /deep/ .ant-btn:hover, .ant-btn:focus {
  color: #fff !important;
  background-color: #d73737 !important;
  border-color: #d73737 !important;
}
.bot-btn2 /deep/ .ant-btn-primary:hover span, .ant-btn-primary:focus span {
  color: #fff !important;
}
.bot-btn1>div,
.bot-btn2>div {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
.item-nonhover1>div, 
.item-nonhover2>div {
  display: inline-block;
  width: 84px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}
.item-nonhover2>div {
  width: 72px;
}
.custom-cur-th {
  padding-right: 3px!important;
}
</style>